<template>
  <el-col class="page" v-loading="loading.state">
    <el-form :model="params" ref="update-form" label-width="130px" class="text-left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="栏位名称:" prop="name" :rules="[{
            required: true,
            message: '请输入栏位名称',
            trigger: 'blur'
                }]">
            <el-input v-model="params.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="栏位Code:" prop="code" :rules="[{
            required: true,
            message: '请输入栏位名称',
            trigger: 'blur'
                }]">
            <el-input v-model="params.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型:" prop="type">
            <el-select v-model=" params.type " placeholder="请选择 ">
              <el-option label=" String " value="String "></el-option>
              <el-option label="Integer " value="Integer "></el-option>
              <el-option label="Date " value="Date "></el-option>
              <el-option label="Boolean " value="Boolean "></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12 ">
          <el-form-item label="栏位长度: " prop="length" :rules="[{
            min: 1,
            message: '请输入整数或空值',
            trigger: 'blur',
            pattern: /^(\d*)$/ 
                }]">
            <el-input v-model="params.length"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <el-button @click="validateFrom() ">保存</el-button>
    <el-button @click="close() ">取消</el-button>
  </el-col>
</template>

<script>
  import servers from '@/config/servers'
  import net from '@/util/net'

  export default {
    name: 'excel-data-template',
    componentName: 'ExcelDataTemplate',
    data() {
      return {
        loading: {
          state: false
        },
        params: {
          id: null,
          code: '',
          default: false,
          type: '',
          name: '',
          length: ''
        },
        options: [],
        server: {
          save: servers.ConfigManage.save_excel_data
        },
        isModify: false
      }
    },
    methods: {
      /**
       * 更新数据
       */
      updateData(data) {
        this.params = Object.assign({}, data)
      },
      /**
       *  修改模版
       */
      validateFrom() {
        this.$refs['update-form'].validate((valid) => {
          if (!valid) {
            return
          }
          net.send({
            server: servers.ConfigManage.check_code,
            data: this.params
          }).then((data) => {
            this.saveTemplate()
          }, ({ reason }) => {
            this.$message({
              type: 'info',
              message: reason
            })
          })
        })
      },

      saveTemplate() {
        this.$refs['update-form'].validate((valid) => {
          if (!valid) {
            return
          }

          net.send({
            server: this.server.save,
            data: this.params
          }).then((data) => {
            // 修改模板信息
            this.$message({
              type: 'success',
              message: '保存模版成功!'
            })
            this.$emit('success')
            this.close()
          }, ({ reason }) => {
            this.$message({
              type: 'info',
              message: reason
            })
          })
        })
      },
      /**
       * 关闭页面并重置数据
       */
      close() {
        this.$emit('close')
        this.isModify = false
        this.$refs['update-form'].resetFields()
      }
    }
  }

</script>
<!-- Add "scoped " attribute to limit CSS to this component only -->
<style scoped>
  .btns {
    text-align: center
  }

</style>
